<template>
	<view class="backgroundMall" :class="APPTheme">
		<uni-nav-bar fixed status-bar left-icon="back" title="背景商城" :color="APPTheme=='theme-light'?'#000000':'#ffffff'" :background-color="APPTheme=='theme-light'?'#ffffff':'#000000'" @clickLeft="$lizhao.lznavigate.lzNavigateBack()"></uni-nav-bar>
		<view class="top theme-border-bottom-auto">
			<view class="t1">
				<u-avatar src="/static/image/im/shangchuanbg.png"></u-avatar>
				<view class="t1-rigth" @click="chooseImage">
					<view class="title">上传背景</view>
					<view class="mask">从相册中选择</view>
				</view>
			</view>
			<view class="t1">
				<u-avatar src="/static/image/im/hfmr.png"></u-avatar>
				<view class="t1-rigth" @click="recovery">
					<view class="title">恢复</view>
					<view class="mask">恢复到默认背景</view>
				</view>
			</view>
		</view>
		<view class="center">
			<view class="title">最新上架</view>
			<view class="content">
				<view class="c-item" v-for="(item,index) in list" :key="index">
					<image class="image" :src="item.src"></image>
					<view class="text"><text class="t1 lz-ellipsis-1">{{item.title}}</text><uni-tag :text="item.tag.text" size="small" :type="item.tag.type" style="transform: scale(0.7);"></uni-tag></view>
					<view class="btn theme-bg" @click="dressUpNow(item)" :class="item.btn=='已装扮'?'activeBtn':''">{{item.btn}}</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	let that
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['APPTheme', 'userInfo', 'api']),
		},
		data() {
			return {
				receiveId:'',
				//商城背景
				list:[{
					id:'2',
					src:'/static/image/im/background/timg.gif',
					title:'向往',
					tag:{
						text:'活动',
						type:'success'
					},
					btn:'立即装扮'
				},{
					id:'3',
					src:'/static/image/im/background/timg2.gif',
					title:'思念',
					tag:{
						text:'活动',
						type:'success'
					},
					btn:'立即装扮'
				},{
					id:'4',
					src:'/static/image/im/background/timg.jpg',
					title:'龙卷风',
					tag:{
						text:'活动',
						type:'success'
					},
					btn:'立即装扮'
				},{
					id:'5',
					src:'/static/image/im/background/timg2.jpg',
					title:'蓝色妖姬',
					tag:{
						text:'活动',
						type:'success'
					},
					btn:'立即装扮'
				},{
					id:'6',
					src:'/static/image/im/background/timg3.jpg',
					title:'晴空万里',
					tag:{
						text:'活动',
						type:'success'
					},
					btn:'立即装扮'
				},{
					id:'7',
					src:'/static/image/im/background/timg4.jpg',
					title:'缘分',
					tag:{
						text:'活动',
						type:'success'
					},
					btn:'立即装扮'
				},{
					id:'8',
					src:'/static/image/im/background/timg5.jpg',
					title:'猫咪',
					tag:{
						text:'活动',
						type:'success'
					},
					btn:'立即装扮'
				}],
				//已设置用户背景
				userBg:[]
			}
		},
		onLoad(e) {
			that = this
			that.receiveId=e.receiveId
			//获取本地设置的背景
			that.getStorageSync()
		},
		methods: {
			//获取本地设置的背景
			getStorageSync(){
				let list= uni.getStorageSync('chat_background')||[]
				let flist=list.filter(item=>{return item.userId==that.receiveId})
				console.log(flist);
				if(flist.length>0&&flist[0].yourself==false){
					//改变立即装扮为已装扮
					that.changeData(flist[0])
				}
			},
			//上传背景
			chooseImage(){
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
				        console.log(JSON.stringify(res.tempFilePaths));
				    }
				});
			},
			//恢复默认
			recovery(){
				let req={
					userId:that.receiveId,
					yourself:true,//是否自己从相册上传的
					src:''
				}
				that.userBg.push(req)
				//数组对象去重存储
				that.setStorageSync()
				//改变立即装扮为已装扮
				that.changeData({id:''})
				uni.showToast({
					title: '恢复成功'
				});
			},
			//立即装扮
			dressUpNow(item){
				let req={
					userId:that.receiveId,
					yourself:false,//是否自己从相册上传的
					id:item.id,
					src:item.src
				}
				that.userBg.push(req)
				//数组对象去重存储
				that.setStorageSync()
				//改变立即装扮为已装扮
				that.changeData(item);
				uni.showToast({
					title: '装扮成功'
				});
			},
			//数组对象去重存储
			setStorageSync(){
				//数组对象去重
				let obj={}
				let peon=that.userBg.reduce((cur,next)=>{
					obj[next.userId]?'':obj[next.userId]=true&& cur.push(next)
					return cur
				},[])
				console.log(peon);
				uni.setStorageSync('chat_background',peon)
			},
			changeData(item){
				that.list.forEach(res=>{
					if(res.id==item.id){
						res.btn='已装扮'
					}else{
						res.btn='立即装扮'
					}
				})
			}
		}

	}
</script>

<style scoped lang="scss">
.backgroundMall{
	height: 100%;
	.top{
		display: flex;width: 100%;padding: 10px 15px;box-sizing: border-box;font-size: 12px;
		.t1{
			flex: 1;display: flex;align-items: center;justify-content: center;
			.t1-rigth{
				margin-left: 5px;
				.title{
					font-weight: bold;
				}
				.mask{color: #888;}
			}
			
		}
	}
	.center{
		.title{font-weight: bold;font-size: 14px;padding: 15px 0;}
		.content{
			display: flex;flex-wrap: wrap;
			.c-item{
				margin-left: 10rpx;margin-bottom: 10px; width: 240rpx;font-size: 12px;display: flex;flex-direction: column;justify-content: center;
				.image{width: 100%;height: 360rpx;border-radius: 5px;}
				.text{display: flex;align-items: center;
					.t1{font-weight: bold;max-width: 60%;display: inline-block;}
				}
				.btn{padding: 5rpx 10rpx;border-radius: 10px;width: 50%;text-align: center;margin: auto;}
				.activeBtn{background-color: #007AFF;color: #fff;}
			}
		}
	}
}
</style>
